import React from 'react'
import { Button, Icon, Input, Table, Tag } from 'antd'
import Highlighter from 'react-highlight-words'
import { convertContent } from '../../../../../constant/lang-util'
import { FormattedMessage } from 'react-intl'

export default class AssignmentsQuizzesStatusBox extends React.Component {
  state = {
    searchText: '',
  }

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
      <div style={{padding: 8}}>
        <Input
          ref={node => {
            this.searchInput = node
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{width: 188, marginBottom: 8, display: 'block'}}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{width: 90, marginRight: 8}}
        >
          Search
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{width: 90}}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{color: '#1890ff'}}/>
    ),
    onFilter: (value, record) =>
      (record[dataIndex]||'')
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select())
      }
    },
    render: text => (
      <Highlighter
        highlightStyle={{backgroundColor: '#ffc069', padding: 0}}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    ),
  })

  handleSearch = (selectedKeys, confirm) => {
    confirm()
    this.setState({searchText: selectedKeys[0]})
  }

  handleReset = clearFilters => {
    clearFilters()
    this.setState({searchText: ''})
  }

  formatTags = (item) => {
    if(!item) return ''

    const tagColors = item.split(',')

    return tagColors.map((item,index) => {
      const tagColor = item.split('|')
      return <Tag color={tagColor[1]} key={index}>{tagColor[0]}</Tag>
    })
  }
  getStatus = item => {
    if(item['已评阅'] > 0) return convertContent('已评阅')
    if(item['状态'] === '优秀') return convertContent('已完成')
    return convertContent(item['状态'])
  }
  getColumns = () => {
    const colomns = [{
      title: <FormattedMessage id='姓名'/>,
      dataIndex: '姓名',
      width:100,
      key: 'name'
    }, {
      title: 'Tag',
      dataIndex:'tag',
      width:200,
      ...this.getColumnSearchProps('tag'),
      sorter: (a,b)=> a-b<0,
      render: (item) => {
        return <span>{this.formatTags(item)}</span>
      }
    },{
      title: <FormattedMessage id='状态'/>,
      width:200,
      dataIndex: '状态',
      render: (item,record) => {
        return this.getStatus(record)
      }
    }]

    return colomns
  }

  render () {
    const {assignmentsQuizzesStatus} = this.props

    const columns = this.getColumns()
    return <div className='assignment-status-box'>
      <Table
        columns={columns}
        dataSource={assignmentsQuizzesStatus}
        bordered
        rowKey={item=>item.assignmentId}
        pagination={false}
        size='small'
      />
    </div>
  }
}

